<template>
	<view class="">
		
			<cu-custom bgColor="bg-gradual-pink"  ><block slot="content">{{title}}</block> 
				<block slot="place">
					<view class="action"  >
						<text class="cuIcon-back" @tap="$emit('friendCircleDisplay')"></text>
					</view>
				</block>
				<block slot="right">
					<view class="action"  >
						<!-- #ifndef MP-WEIXIN -->
						<text @click="publish()">发表</text>
						<!-- #endif -->
					</view>
				</block>
			</cu-custom>
			<view class="">
				<chat-list :current_messages="post_messages"  :is_pop_up="modalName=='bottomModal'"></chat-list>
			</view>
			
			<view class="" style="display: none;">
				{{current_to.id}}
			</view>
			
			<view ref="input" class="cu-bar foot input" style="z-index: 9999;" @tap.stop="" :style="[{bottom:InputBottom*2+'rpx'}]">
				<view class="action" @tap="recOpen()" v-if="!rec_open">
					<text class="cuIcon-sound text-grey"></text>
				</view>
				<view class="action text-black"  @tap="recCancel()" v-if="rec_open">
					 取消
				</view>
				<input @tap="recStart()" v-if="rec_open" class="solid-bottom" disabled="true" :placeholder="audio_plachodler" placeholder-style="text-align:center">
				<!-- <textarea auto-height="true" :show-confirm-bar="false" style=""  v-if="!rec_open"  class="text-black solid-bottom" :adjust-position="false" :focus="focus" maxlength="300" cursor-spacing="10"
				 @focus="InputFocus" @blur="InputBlur" v-model="content"   placeholder-style="height: 64upx;line-height: 64upx" placeholder="请输入内容">
				 </textarea> -->
				<view v-if="!rec_open" class="action grid col-1 " style="margin-left: 0px;width: calc(100% - 300rpx);">
					<textarea  auto-height="true" :show-confirm-bar="false" style="margin-left: 0px;"  v-if="!rec_open"  class="text-black solid-bottom" :adjust-position="false" :focus="focus" maxlength="300" cursor-spacing="10"
					 @focus="InputFocus" @blur="InputBlur" v-model="content"   placeholder-style="height: 64upx;line-height: 64upx" :placeholder="placeholder">
					 </textarea>
					 <!-- 引用消息 -->
					<chat-quote-message-input-down :quote_messages="quote_messages" @deleteQuoteMessage="deleteQuoteMessage"></chat-quote-message-input-down>
					<!-- 引用消息 -->
				</view>
				
				<view class="action" @tap="showModal" data-target="bottomModal" data-display="emoji" v-if="!modalName">
					<text class="cuIcon-emoji text-grey"></text>
				</view>
				<view class="action"  @tap="edit()" v-if="modalName=='bottomModal'">
					<text class="cuIcon-form text-grey"></text>
				</view>

				<view class="action"  @tap="showModal" data-target="bottomModal" data-display="add" v-if="!send_button">
					<text class="cuIcon-add text-grey"></text>
				</view>	

				
				<button class="cu-btn bg-green shadow" @tap="send_message()" v-if="send_button">发送</button>
			</view>
			
			<view ref="emoji" class="cu-bar foot" style="z-index: 9999;" :style="[{display:modalName=='bottomModal'?'block':'none'}]">
				<view class="" v-show="displayName=='emoji'">
					<chat-emoji ></chat-emoji>
				</view>
				<view v-show="displayName=='add'" class="" style="height: 520rpx;overflow-y: auto;">
					<view class="flex flex-wrap" style="min-height: 520rpx;background-color: #f1f1f1;">
						<view class="basis-xs  margin-xs padding-sm" @tap="imChooseImage()">
							<view class="cu-avatar xl" style="">
								<view class="cuIcon-camera">
									
								</view>
							</view>
						</view>
						
						<!-- #ifdef H5 -->
						<view class="basis-xs  margin-xs padding-sm" @tap="imChooseFile()">
							<view class="cu-avatar xl" style="">
								<view class="cuIcon-file">
									
								</view>
							</view>
						</view>
						<!-- #endif -->
						<view class="basis-xs  margin-xs padding-sm" @tap="imChooseVideo()">
							<view class="cu-avatar xl" style="">
								<view class="cuIcon-video">
									
								</view>
							</view>
						</view>
						
						
						
					</view>
				</view>
			</view>
			
			<view class="" style="position: fixed;left: 0;top: 0;width: 100vw;height: 100vh;z-index: 1;" @tap="hide_emoji_typewriting()" v-if="InputBottom>0" >
				
			</view>

	</view>
</template>

<script>
	import app from '@/mixins/app.js'
	import im from '@/mixins/im.js'
	import recorder from '@/mixins/recorder.js'
	import random_chat from '@/mixins/random_chat.js'


	export default {
		data() {
			return {
				title:'发布文章',
				avatar:['https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg','https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg','https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg','https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'],
				post_messages:[]
			};
		},
		computed:{
			send_button(){
				return !!this.content
			},
			placeholder(){
				if(!this.send_button){
					return '会自动聚合的奥～'
				}
				return ''
			},
			current_to(){
				return {
					id:1
				}
			}
		},
		mixins:[app,im,recorder],
		methods: {
			publish(){
				if(this.post_messages.length==0){
					uni.showToast({
						icon:'none',
						title:'请输入发表内容'
					})
					return 
				}
				this.$store.dispatch('post/publish',{post_messages:this.post_messages}).then((res)=>{
					if(res.data.code==0){
						console.log(213213,'friendCircleDisplay')
						this.$emit('friendCircleDisplay')
						setTimeout(()=>{
							this.toEmit('friend-circle-page-pull-down-refresh')
						},1500)
					}
				})
				console.log('发表了文章')
			},
			send_message(){
				
				this.im_send(1)
				this.toEmit('im-send-after-event')
				
			},
			async im_send(type){
				this.$store.dispatch('im/pull_refresh',false)//取消下拉刷新，聊天记录自动滚动
				if(type){
					this.message_type = 'text'
				}
				if(!this.msg){//统一设置小字提示
					this.setMsg()
				}
				
				
				var user = JSON.parse(JSON.stringify(this.user))
				delete user.divide_groups
				delete user.groups
				delete user.friend_groups
				delete user.token_length
				var params = {
					unique_slug:this.option.to.id+'-'+(new Date()).getTime()+'-'+this.$tool.randomString(10),
					from_id:this.user.id,
					from: user,
					to_id:this.option.to.id,
					type:this.option.type,
					to: this.current_to,
					message_type:this.message_type,
					data:{
						content: this.content,
						msg: this.msg,
						extra:this.extra
					},
					sended_at:this.$tool.dateFormat('Y-m-d H:M:S',new Date())
				}
				
				this.put_message(params)
				this.content=''
				this.msg=''
				this.extra={}
				this.quote_messages = []		
				
				uni.$emit('im-send-after-event')
				
				// params.client_id = this.im.client_id
				// await this.$store.dispatch('im/send',params)
				
				console.log('blog publish')
			},
			async put_message(message){
				this.post_messages.push(message)
			},
			hide_emoji_typewriting(e){//点击屏幕 隐藏输入法等
				console.log(132132)
				this.InputBottom = 0
				if(this.modalName=='bottomModal'){//表情
					this.modalName = null
				}
				
			},
			edit(){
				this.focus =false
				this.modalName = null
				this.InputBottom = 0
				this.$nextTick(()=>{
					this.focus =true
				})
			},
			async hideModal(e) {//重写app 里的方法
				if(this.modalName=='viewModalGroupAdd'){//聊天页面全屏抽屉关闭后展示左边抽屉
					//此时选择完了要加群的用户，这里加个群
					if(this.im.group_checked_user_ids.length>0){
						await this.imJoinGroup()
						console.log(212332132132)
					}
					this.modalName='DrawerModalL'
					console.log(9999999)
				}else if(this.modalName=='bottomModal'){
					this.modalName = null
					console.log(21323)
				}else{
					this.modalName = null
				}
			},
			showModal(e){
				if(e.currentTarget.dataset.target=='bottomModal'){
					this.InputBottom = 0
					 this.modalName = null
					this.displayName = null
					
					setTimeout(()=>{
						
						this.InputBottom = 260
						this.modalName = 'bottomModal'
						this.displayName = e.currentTarget.dataset.display
					},200)
				}else{
					this.modalName = e.currentTarget.dataset.target
				}
			},
		
			InputFocus(e) {
				console.log(e.detail.height,'input')
				// alert(e.detail.height)
				
				this.InputBottom = e.detail.height
				if(!this.InputBottom){
					this.InputBottom = 1
				}else{
					this.InputBottom += 10
				}
				this.modalName = null
				return 
				if(this.InputBottom){
					this.modalName = null
					this.InputBottom = 0
				}else{
					this.InputBottom = e.detail.height
				}
				//小程序 页面整体高度加了 键盘的高度，其他的是键盘高度将页面高度压缩了
				//#ifdef MP-WEIXIN
				this.InputBottom = 260
				//#endif
				
				// this.InputBottom = this.InputBottom>150?(e.detail.height-300):e.detail.height
				// this.modalName = null //输入法吊起所有隐藏
			},
			InputBlur(e) {
				
				this.InputBottom = 0
				return 
				//#ifdef MP-WEIXIN
				this.InputBottom = 0
				//#endif
				// this.InputBottom = 0
			},
			



			chat_content(data){//表情
				var start = this.content.slice(0,this.focus_position)
				var end = this.content.slice(this.focus_position)
				start+=data
				this.content =start + end
			},
			chat_modal(data){
				this.modalName = data
			},
			longpressSelectChatPopover(data){//
				if(data.name=='删除'){//选择引用
					this.post_messages =this.post_messages.filter((m)=>{
						return m.unique_slug != data.message.unique_slug
					})
					console.log('删除',data,'select-popover delete post_messages')
				}else{
					console.log('action other',data,'select-popover')
				}
			},
			commonInit(){
				this.$store.dispatch('app/btn_list',['删除'])
				this.focus_timer = setInterval(()=>{
					uni.getSelectedTextRange({
					  success: res => {
						this.focus_position = res.start
						console.log('getSelectedTextRange res', res.start, res.end)
					  }
					})
				},1500)
			},
		},

		mounted() {
			
			console.log('publish mounted!!!')
			uni.$on('chat-content',this.chat_content)//表情添加到content
			
			//发送事件
			uni.$on('im-send-event',this.imSendEvent)
			uni.$on('im-send-after-event',this.imSendAfterEvent)
			uni.$on('longpress-chat-popover',this.longpressSelectChatPopover)//长按
			
			this.commonInit()
			
			var new_option ={}
			new_option.to = {id:'post_1'}
			new_option.type = 	'group'
			// this.toEmit('message-change',option)
			this.$store.dispatch('app/option',new_option)
			
			
		},
		destroyed() {
			uni.$off('chat-content', this.chat_content)
			uni.$off('im-send-event',this.imSendEvent)
			uni.$off('im-send-after-event',this.imSendAfterEvent)
			this.destroyCommonInit()
		},
	}
</script>

<style>
	page{
	  padding-bottom: 100rpx;
	}
</style>
